<template>
  <div id="app">
    <tbody>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>考试时间</th>
        <th class="jcc">操作</th>
        <th class="jcc">
          <!-- 2.0.11 全选按钮 仅为了实现全选，没有其他作用 -->
          全选:<input v-model="isAll" type="checkbox" />
        </th>
      </tr>
      <!--2.0.12 item(数组里面的每一个对象) item是被迭代的数组元素别名 -->
      <!-- 为了给Vue提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key (建议使用id) -->
      <tr v-for="item in list" :key="item.id">
        <!-- 2.0.13 分别渲染编号，姓名，科目，成绩，考试时间 -->
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.subjects }}</td>
        <!-- 2.0.14 动态设置类名，如果小于60为ture(增加红色类，如果为false则不标红) -->
        <td :class="{ redStr: item.score < 60 }">{{ item.score }}</td>
        <td>{{ item.nowTime }}</td>
        <td>
          <p class="jcc">
            <!-- <a href="" @click.prevent="">编辑</a> -->
            <!-- 2.0.15 给删除按钮绑定点击事件并阻止默认行为 -->
            <a href="" @click.prevent="delItem(item)">删除</a>
            <!-- 2.0.16 小选框 -->
            <input v-model="item.c" type="checkbox" />
          </p>
        </td>
      </tr>
      <div class="sum">
        <!-- 2.0.17 通过计算属性以及reduce方法获取总分 -->
        <span>班级总分：{{ scoresum }}分</span>
        <!-- 2.0.18 利用toFixed方法获取2位小数 总分/数组长度 -->
        <span>班级平均分：{{ (scoresum / list.length).toFixed(2) }}分</span>
      </div>
    </tbody>
    <!------------------------------------------ 一、 添加框静态区域start  ---------------------------------------------------->
    <form class="kemu">
      <b>添加学生成绩
        <!-- 1.0.9 isShow2默认开启，初始值为true，点下隐藏按钮显示添加框区域 ，绑定点击事件btn2，并且阻止默认行为 -->
        <button v-show="isShow2" @click.prevent="btn2">添加</button>
      </b>
      <!-- 1.0.10 点击添加按钮开启以下添加框内容，同时隐藏添加按钮 -->
      <!-- 1.0.10.1 isShow1默认关闭，初始值为false -->
      <div v-show="isShow1">
        <!-- 1.0.11 通过简写v-bind绑定提示信息，使用双向绑定指令v-model(可动态检测用户是否输入了数据) -->
        <p>姓名：<input type="text" :placeholder="tis2" v-model="name" /></p>
        <p>科目：<input type="text" :placeholder="tis" v-model="subjects" /></p>
        <p>分数：<input type="text" :placeholder="tis1" v-model="score" /></p>
        <div class="btn111">
          <!-- 1.0.12 绑定点击事件addscore，并且阻止默认行为，这里的主要效果是添加数据进入表格，添加之前进行非空判断 -->
          <button @click.prevent="addscore">添加</button>
          <!-- 1.0.13 绑定点击事件off，并且阻止默认行为，这里的效果是点击隐藏添加框，显示添加按钮 -->
          <button @click.prevent="off">取消</button>
        </div>
      </div>
    </form>
    <!------------------------------------------ 一、 添加框静态区域end  ---------------------------------------------------->
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      // 加载原始数据，学生的考试科目、成绩姓名、考试时间、id、小选框选中状态
      // list: [
      //   {
      //     subjects: "Ajax",
      //     score: 79,
      //     name: "小紫",
      //     id: "1656407974",
      //     nowTime: "2022/6/28 17:19:34",
      //     //1.0.3控制小按钮的勾选状态
      //     c: false,
      //   },
      //   {
      //     subjects: "JS高级",
      //     score: 59,
      //     name: "小蓝",
      //     id: "1656388768",
      //     nowTime: "2022/6/28 11:59:28",
      //     c: false,
      //   },
      //   {
      //     subjects: "web api",
      //     score: 100,
      //     name: "小白",
      //     id: "1656382252",
      //     nowTime: "2022/6/28 10:10:52",
      //     c: false,
      //   },
      //   {
      //     subjects: "移动web",
      //     score: 99,
      //     name: "小黄",
      //     id: "1656382321",
      //     nowTime: "2022/6/28 10:12:01",
      //     c: false,
      //   },
      // ],
       list:JSON.parse(localStorage.getItem('list')),
      //1.0.1添加框内的提示信息，通过简写v-bind进行绑定
      tis: "请输入科目",
      tis1: "请输入分数",
      tis2: "请输入姓名",
      //1.0.4添加框内输入的基本数据
      subjects: "", //输入的科目初始数据
      score: "", //成绩初始数据
      name: "", //姓名初始数据
      nowTime: "", //当前考试时间初始数据
      isShow1: false, //添加框的内容(姓名科目分数)，默认关闭显示
      isShow2: true, //添加框按钮，默认开启显示
    };
  },
  methods: {
    //1.0.5添加按钮的点击事件
    btn2() {
      //1.0.6点击时取反isShow1(添加框的内容，默认关闭，取反则显示它)
      (this.isShow1 = !this.isShow1),
      //1.0.7点击时取反isShow2(添加框的按钮，默认开启，取反则关闭它)
      (this.isShow2 = !this.isShow2),
      //1.0.8清空添加框的内容，(清空用户输入内容然后重新打开的残留数据)
      //清空姓名
      this.name = "";
      // 清空成绩
      this.score = "";
      //清空科目
      this.subjects = "";
      //1.0.9 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 往上拉到静态结构查看 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
    },
    //1.0.14 取消按钮，点击取消隐藏添加框，然后显示添加按钮
    off() {
      (this.isShow1 = !this.isShow1), (this.isShow2 = !this.isShow2);
    },
    //1.0.15 绑定按钮的点击事件
    addscore() {
      //1.0.16 非空判断，如果当前(姓名/考试科目/学生成绩)的值为空则提示不能为空
      //this.name有值则为真，取反则它是空(假)则返回真(提示不能为空)
      if (!this.name) {
        alert("输入的学生姓名不能为空！");
      } else if (!this.subjects) {
        alert("输入的考试科目不能为空！");
      } else if (!this.score) {
        alert("输入的学生成绩不能为空！");
      } else {
        //1.0.17 姓名、考试科目、学生成绩都不为空时创建一个对象，对象的值就是用户输入的值
        const item = {
          //1.0.17.1学生姓名存入
          name: this.name,
          //1.0.17.2学生成绩存入 需要数字类型(后面需要进行计算)，所以在前面加一个+进行转换
          score: +this.score,
          //1.0.17.3存入考试科目
          subjects: this.subjects,
          //1.0.17.4获取当前的考试时间
          nowTime: new Date().toLocaleString(),
          //1.0.17.5利用时间戳来做一个id
          id: parseInt(new Date().getTime() / 1000),
          c:false,
        };
        // 1.0.18 在list前面添加 item    unshift在前面添加
        this.list.unshift(item);
        //1.0.19成功录入后清空
        //清空name
        this.name = "";
        //清空成绩
        this.score = "";
        //清空科目
        this.subjects = "";
      }
    },
    // ------------------------------------------ 二、 渲染页面  ----------------------------------------------------
    //2.0.1 删除点击事件  获取元素
    delItem(item) {
        // 2.0.2 通过findIndex方法查找id元素在list里的下标
        const id = this.list.findIndex((value) => value.id == item.id);
        // 2.0.3 通过splice 功能（从第几个元素，删除几个）删除对应的数据
        this.list.splice(id, 1);
    },
  },
  // 2.0.21给数组添加深度监听事件
  watch: {
    //2.0.22 这里放数组名字
    list: {
      //2.0.23 这里放深度监听固定语法
      deep: true,
      //2.0.24 固定写法，val=改变后的数组数据，
      handler(val) {
        //2.0.25 每当我的数组发生改变，就把变化存进本地
        localStorage.setItem("list", JSON.stringify(val));
      },
    },
  },
  //计算属性
  computed: {
    //2.0.4计算总分的方法
    scoresum() {
      //reduce方法使用示例
      // reduce(function(a,b,c,d),起始值);
      // a 必须  b 必须   c 可选    d 可选      起始值 可选
      // a：启动时，如果reduce定义了起始值，则会将起始值赋给a，
      // 如果没有设定起始值，则将数组第一个值赋给a，
      // 运行时，第二次及后续执行时，会将前一次执行的结果赋给a。
      // b：启动时，如果a为起始值，b则为数组第一个值，如果a为数组第一个值，b则为第二个
      // 运行时，每次调用，都会按顺序将b当前位置的下一位值赋给b。
      // c：reduce函数会自动设置该值，它的值是b当前数组的坐标，从0开始
      // d：如果你在函数中需要调用数组对象，reduce函数会将b的数组对象赋给d，以满足需要。

      //reduce方法，遍历数组，acc=累加结果 cur=当前值 0=初始值
      //2.0.5累加所有学生的成绩并计算
      return this.list.reduce((acc, cur) => acc + cur.score, 0);
    },
    //2.0.5全选框选中的方法
    isAll: {
      //2.0.6 计算属性里的set方法，拿到全选框状态然后赋给数组里面每个对象的c属性
      set(val) {
        //2.0.7循环数组，将全选状态同步给小选框
        //2.0.8遍历数据数组，赋给所有小选框v-model关联的属性
        this.list.forEach((item) => {
          item.c = val;
        });
      },
      get() {
        //2.0.9 使用every方法遍历数组，如果item.c都会true则返回true
        //2.0.10 小选框都选中时返回一个ture的值给全选的框，使它选中
        return this.list.every((item) => {
          return item.c === true;
        });
        //2.0.11 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 往上拉到静态结构查看 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
      },
    },
  },
};
</script>
<style>
.jcc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn111 {
  display: flex;
  justify-content: space-around;
}
table {
  border-collapse: collapse;
}
th,
td {
  width: 150px;
  height: 40px;
  border: 1px solid black;
  font-size: 12px;
  text-align: center;
}
#app {
  color: purple;
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.redStr {
  color: red;
}
.sum {
  margin-top: 15px;
  text-align: center;
}
span:nth-child(2) {
  margin-left: 35px;
}
.kemu input {
  height: 20px;
  width: 150px;
}
.kemu {
  width: 250px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 25px;
}
a:nth-child(2) {
  margin-left: 10px;
}
</style>
